<template>
  <div class="searchBox">
    <el-form
      :inline="true"
      :model="searchOptions"
      class="demo-form-inline"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :span="item.size" v-for="item in searchOptions" :key="item.name">
          <el-form-item :label="item.label">
            <el-input
              v-if="item.type === 'input'"
              v-model="item.value"
              :placeholder="item.placeholder"
              clearable
            />
            <el-select
              v-else-if="item.type == 'select'"
              v-model="item.value"
              :placeholder="item.placeholder"
              clearable
            >
              <el-option
                v-for="data in item.options"
                :key="data.value"
                :label="data.label"
                :value="data.value"
              />
            </el-select>
            <el-date-picker
              v-else-if="item.type == 'date'"
              v-model="item.value"
              type="datetime"
              clearable
              :placeholder="item.placeholder"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
            <el-date-picker
              v-else-if="item.type == 'datetimerange'"
              v-model="item.value"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
            <el-cascader
              v-else-if="item.type == 'goodsClassify'"
              :options="item.options"
              v-model="item.value"
              :show-all-levels="false"
              :placeholder="item.placeholder"
              :props="{
                label: 'name',
                value: 'id',
              }"
            />
            <el-cascader
              v-else-if="item.type == 'city'"
              :options="item.options"
              v-model="item.value"
              :placeholder="item.placeholder"
              :props="{
                label: 'name',
                value: 'code',
                children: '_child',
              }"
            />
          </el-form-item>
        </el-col>
        <div class="doButton">
			<el-button type="primary" @click="handelSearchMet()" icon="Search">
			  查询
			</el-button>
          <el-button @click="handelReset()" icon="RefreshLeft">重置</el-button>
         
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script setup>
const props = defineProps({
  searchOptions: {
    type: Array,
    required: true, // 必须传参
  },
});

// 定义暴露方法
const emits = defineEmits(['handelSearch']);

// 搜索
const handelSearchMet = () => {
  let info = {};
  info = props.searchOptions.reduce((list, item) => {
    list[item.key] = item.value || '';
    return list;
  }, {});
  emits('handelSearch', info);
};

// 重置
const handelReset = () => {
  props.searchOptions.forEach((item) => {
    item.value = '';
  });
  handelSearchMet();
};
// 赋值方法
const handelSetOptions = (opitions, index) => {
  props.searchOptions[index].options = opitions;
};
defineExpose({
  handelSetOptions: handelSetOptions,
  handelReset: handelReset,
});
</script>
<style lang="scss" scoped>
.searchBox {
  width: 100%;
  ::v-deep .el-form {
    width: 100%;
    .el-row {
      width: 100%;
      .el-col {
        height: auto;
        .el-form-item {
          width: 100%;
          .el-select,
          .el-cascader,
          .el-input {
            width: 100%;
          }
        }
        .el-input__inner {
          height: 32px;
        }
      }
    }
  }

  .doButton {
    height: 52px;
    line-height: 32px;
    margin-left: 10px;
  }
}
</style>
